import BaseComponent from "../../app/baseComponent";

function firstUpperCase(str) {
    return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
}

function whichAnimationEvent(type){
    var t;
    var el = document.createElement('fakeelement');
    
    var transitions = {
    }

    transitions['animation'] = 'animation' + type;
    transitions['MozAnimation'] = 'animation' + type;
    transitions['WebkitAnimation'] = 'webkitAnimation' + firstUpperCase(type);

    for(t in transitions){
        if( el.style[t] !== undefined ){
            return transitions[t];
        }
    }
}

var animationEvent = whichAnimationEvent("start");

export class AUIModal extends BaseComponent {
    constructor(name) {
        super(name);
        this.methods = {
            show() {
                var self = this;
                self.isShow = true;
                self.$refs.modal.style.display = "block";
                self.$refs.modContent.classList.remove('aui-modal-animated-out')
                self.$refs.modContent.classList.add('aui-modal-animated-in');

                self.$emit("modalshow");
                setTimeout(function() {
                    document.addEventListener('click',  self.hideModal);
                }, 500);              
            },
            hide() {
                var self = this;
                self.isShow = false;
                self.$refs.modal.style.display = "none";
                setTimeout(function () {
                    self.$emit("modalhide");
                }, 0);
            },
            toggle() {
                var self = this;
                if (!self.isShow) {
                    self.show();
                } else {
                    self.close();
                }
            },
            close() {
                var self = this;

                self.$refs.modContent.classList.remove('aui-modal-animated-in');
                self.$refs.modContent.classList.add('aui-modal-animated-out');

                if (animationEvent) {
                    self.$refs.modal.addEventListener(animationEvent, function onModalAnimationStartEvent() {
                        setTimeout(function() {
                            self.hide();
                        }, 300);
                        self.$refs.modal.removeEventListener(animationEvent, onModalAnimationStartEvent);
                    });
                } else {
                    self.hide();
                }
            },
            hideModal(e) {
                var self = this;
                var target = e.target;
                if(target.isEqualNode(self.$refs.modal) || target.isEqualNode(self.$refs.modalclose)) {
                    self.close();
                    document.removeEventListener('click',  self.hideModal);
                }
            }
        }
    }
    _template() {
        var self = this;
        return `<div ref="modal" class="${self._name}">
<div ref="modContent" class="aui-modal-content">        
    <div class="aui-modal-header">
        <h3 class="aui-modal-header-title"><slot name="title">aui-Modal Header</slot></h3>
        <div ref="modalclose" class="close fa fa-close"></div>    
    </div>
    <div class="aui-modal-body">
        <slot></slot><slot name="body"></slot>            
    </div>
    <div class="aui-modal-footer">
        <slot name="footer"></slot>
    </div>
</div>
</div>`;
    }
    _mounted() {
        var self = this;
    }
    _data() {
        var ret = {};
        ret.isShow = false;
        return ret;
    }  
}

AUIModal.install = function () {
    window.AUICustomComponents.define("aui-modal", AUIModal);
}
